// 固定页脚点击消失
let oxiaos = document.querySelector('.xiaos')
let obottomflexd = document.querySelector('#bottomflexd')
oxiaos.addEventListener('click', function(ev) {
    if (ev.target.className === 'xiaos') {
        obottomflexd.style.display = 'none'
    }
})

//点击深圳出现 点击x消失
var oshuchu = document.querySelector('.shuchu')
if (sessionStorage.getItem('n')) {
    oshuchu.innerHTML = sessionStorage.getItem('n')
} else {
    oshuchu.innerHTML = '深圳'
}
let ogeographic = document.querySelector('#header .geographic')
let oszgb = document.querySelector('.szgb')
let aa = document.querySelectorAll('.szmain p a')
oshuchu.addEventListener('click', function(ev) {
    if (ev.target.className === 'shuchu') {
        ogeographic.style.display = 'block'
    }
    if (ogeographic.style.display = 'block') {
        aa.forEach((ele) => {
            ele.addEventListener('click', () => {
                oshuchu.innerHTML = ''
                oshuchu.innerHTML = ele.innerHTML
                sessionStorage.setItem('n', oshuchu.innerHTML)
                window.location.href = 'index.html'
            })
        })
    }
    if (ogeographic.style.display = 'block') {
        oszgb.addEventListener('click', () => {
            ogeographic.style.display = 'none'
        })
    }
})

// 头部导航栏选项卡
let onavsaka = document.querySelectorAll('.navli .dbj')
let onavxxka = document.querySelectorAll('.dbj .navxxka')
onavsaka.forEach((ele, index) => {
    ele.onmouseenter = function() {
        onavxxka[index].style.display = 'block'
    }
    ele.onmouseleave = function() {
        onavxxka[index].style.display = 'none'

    }
})

//页脚选项卡
let owa = document.querySelectorAll('.btControl a')
let odiv = document.querySelectorAll('.bottomxxka div')
owa.forEach((ele, index) => {
    ele.onmouseenter = function() {
        odiv[index].style.display = 'block'
    }
    ele.onmouseleave = function() {
        odiv[index].style.display = 'none'
    }
})

//搜索框小三角
let oli = document.querySelectorAll('.hdfl li')
let ohdsearchka1 = document.querySelector('.hdsearchka1')
let ohdsearchka2 = document.querySelector('.hdsearchka2')
let ohdsearchka3 = document.querySelector('.hdsearchka3')
let ohdsearchka4 = document.querySelector('.hdsearchka4')
let ohdtrigon = document.querySelector('.hdtrigon')
let ohedsearchbtn = document.querySelector('.hedsearchbtn') //搜索按钮
ohdsearchka2.addEventListener('click', function() {
    oli.forEach((ele) => {
        ele.style.fontWeight = 'normal'
    })
    ohdsearchka2.style.fontWeight = 'bold'
    ohdtrigon.style.left = '89px'
    ohdtrigon.style.transition = '0.5s'
    if (ohdtrigon.style.left = '89px') {
        ohedsearchbtn.addEventListener('click', () => {
            window.location.href = 'newhouseList.html'
                // console.log('新房')
        })
    }

})
ohdsearchka3.addEventListener('click', function() {
    oli.forEach((ele) => {
        ele.style.fontWeight = 'normal'
    })
    ohdsearchka3.style.fontWeight = 'bold'
    ohdtrigon.style.left = '151px'
    if (ohdtrigon.style.left === '151px') {
        ohedsearchbtn.addEventListener('click', () => {
            window.location.href = 'leaseHouseList.html'
                // console.log('租房')
        })
    }
})
ohdsearchka4.addEventListener('click', function() {
    oli.forEach((ele) => {
        ele.style.fontWeight = 'normal'
    })
    ohdsearchka4.style.fontWeight = 'bold'
    ohdtrigon.style.left = '215px'
    if (ohdtrigon.style.left === '215px') {
        ohedsearchbtn.addEventListener('click', () => {
            window.location.href = 'community.html'
                // console.log('小区');
        })
    }
})
ohdsearchka1.addEventListener('click', function() {
    oli.forEach((ele) => {
        ele.style.fontWeight = 'normal'
    })
    ohdsearchka1.style.fontWeight = 'bold'
    ohdtrigon.style.left = '16px'
    if (ohdtrigon.style.left = '16px') {
        ohedsearchbtn.addEventListener('click', () => {
            window.location.href = 'houseList.html'
                // console.log('二手房')
        })
    }

})
if (ohdtrigon.style.left = '16px') {
    ohedsearchbtn.addEventListener('click', () => {
        window.location.href = 'houseList.html'
            // console.log('二手房')
    })
}

// 渲染需要
let alllist = []
var arr = []
    // 第一部分数据渲染 
async function fnfirst() {
    await pAjax({
        url: '../../php/getNewHouse.php',
        type: 'get',
    }).then(function(res) {
        let ofirstbox = document.querySelector('.firstbox')
        display(res, ofirstbox)
    })
}
fnfirst()
    // 第二部分数据渲染 
async function fntwo() {
    await pAjax({
        url: '../../php/getSecondHands.php',
        type: 'get',
    }).then(function(res) {
        let otwobox = document.querySelector('.twobox')
        display(res, otwobox)
    })
}
fntwo()
    //第三部分数据渲染
async function fnthree() {
    await pAjax({
        url: '../../php/getLeaseHouse.php',
        type: 'get',
    }).then(function(res) {
        let othreebox = document.querySelector('.threebox')
        display(res, othreebox)
    })

}
fnthree()

function display(res, box) {
    //渲染内容
    arr = JSON.parse(res)
    arr = arr.slice(0, 4)
    alllist = alllist.concat(arr) //不改变原数组的基础上添加新数组
        // console.log(aa)
    arr.forEach((ele) => {
        let str3 = `<section>
            <a href="javascript:;" goodsId="${ele.id}" class="indexxq" onclick=fnnc(${ele.id})>
                <img src="${ele.img}" alt="">
                <span>${ele.community}</span>
                <div class="mnexm">
                    <h5>${ele.name}</h5>
                    <dl>
                        <dd><i class="iconfont icon-location"></i>&nbsp;${ele.LocationArea}</dd>
                        <dt><i class="mnewjg">${ele.unitPrice}</i>元/m²</dt>
                    </dl>
                </div>
                <i class="iconfont icon-VR vr"></i>
            </a>
        </section>`
        box.innerHTML += str3

    })
}

function fnnc(id) {
    let house = alllist.filter(function(el) {
            // console.log(el.id)
            return el.id == id
        })[0]
        // console.log(house);
        // console.log(alllist);
    localStorage.setItem('QfangItem', JSON.stringify(house))
    window.location.href = house.type + 'details.html';
}
// JSON.stringify 把对象换成字符串
// JSON.parse 把字符串换成对象



// 获取登录的账户信息
let onavdlzc = document.querySelector('.navdlzc')
let oUserInfo = document.querySelector('.indexhy') //欢迎语元素
let oLogin = document.querySelector('.indexdl') //登录元素
let onavli = document.querySelector('.navli')
if (localStorage.username) {
    oUserInfo.innerHTML = localStorage.username + '<a class="logOut" href="javascript:;">退出<i/>'
    oLogin.innerHTML = ''
    onavdlzc.style.marginLeft = '0px'
    onavli.style.marginLeft = '50px'
} else {
    oLogin.innerHTML = '登录'
}
// 获取退出
let ologOut = document.querySelector('.logOut')
ologOut.addEventListener('click', function() {
    localStorage.setItem('username', '')
    oUserInfo.innerHTML = ''
    oLogin.innerHTML = '登录'
    window.location.href = 'index.html'
})